<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<style>
    .form-header {
        margin-bottom: 30px;
    }
    
    .form-title {
        font-size: 28px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 8px;
    }
    
    .form-subtitle {
        color: #666;
        font-size: 16px;
    }
    
    .form-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        padding: 40px;
        max-width: 600px;
        border: 1px solid #e5e5e5;
    }
    
    .form-group {
        margin-bottom: 24px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #1a1a1a;
        font-weight: 600;
        font-size: 14px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #e5e5e5;
        border-radius: 8px;
        font-size: 16px;
        transition: all 0.3s ease;
        background: #fafafa;
        color: #1a1a1a;
    }
    
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: #333;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
    }
    
    .form-group textarea {
        min-height: 100px;
        resize: vertical;
    }
    
    .form-actions {
        display: flex;
        gap: 12px;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid #e5e5e5;
    }
    
    .btn {
        padding: 12px 24px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    
    .btn-primary {
        background: #1a1a1a;
        color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .btn-primary:hover {
        background: #333;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .btn-secondary {
        background: white;
        color: #1a1a1a;
        border: 2px solid #e5e5e5;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .btn-secondary:hover {
        background: #f5f5f5;
        border-color: #333;
        transform: translateY(-1px);
    }
    
    .error-message {
        background: #f8f8f8;
        color: #d32f2f;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        border-left: 4px solid #d32f2f;
        font-size: 14px;
        font-weight: 500;
    }
    
    .form-description {
        color: #666;
        font-size: 14px;
        margin-top: 4px;
        line-height: 1.4;
    }
    
    .visibility-options {
        display: flex;
        gap: 16px;
        margin-top: 8px;
    }
    
    .visibility-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border: 2px solid #e5e5e5;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        background: white;
    }
    
    .visibility-option:hover {
        border-color: #333;
        background: #f5f5f5;
    }
    
    .visibility-option input[type="radio"] {
        margin: 0;
        width: auto;
    }
    
    .visibility-option.selected {
        border-color: #1a1a1a;
        background: #f0f0f0;
    }
</style>

<div class="form-header">
    <div class="form-title">${edit ? '编辑空间' : '创建空间'}</div>
    <div class="form-subtitle">${edit ? '修改空间信息' : '创建新的知识空间'}</div>
</div>

<div class="form-card">
    <c:if test="${not empty error}">
        <div class="error-message">${error}</div>
    </c:if>
    
    <c:set var="formAction" value="/space/create"/>
    <c:if test="${edit}">
        <c:set var="formAction" value="/space/edit/${space.id}"/>
    </c:if>
    
    <form action="${formAction}" method="post">
        <div class="form-group">
            <label for="name">空间名称</label>
            <input type="text" id="name" name="name" value="${space.name}" required placeholder="请输入空间名称">
            <div class="form-description">为您的空间起一个简洁明了的名称</div>
        </div>
        
        <div class="form-group">
            <label for="description">空间描述</label>
            <textarea id="description" name="description" required placeholder="请描述这个空间的用途和内容">${space.description}</textarea>
            <div class="form-description">简要描述空间的主要内容和用途</div>
        </div>
        
        <div class="form-group">
            <label>可见性设置</label>
            <div class="visibility-options">
                <label class="visibility-option ${space.visibility == 'public' ? 'selected' : ''}">
                    <input type="radio" name="visibility" value="public" ${space.visibility == 'public' ? 'checked' : ''}>
                    <span>🌐</span>
                    公开空间
                </label>
                <label class="visibility-option ${space.visibility == 'private' ? 'selected' : ''}">
                    <input type="radio" name="visibility" value="private" ${space.visibility == 'private' ? 'checked' : ''}>
                    <span>🔒</span>
                    私有空间
                </label>
            </div>
            <div class="form-description">
                公开空间：所有人都可以查看和加入<br>
                私有空间：只有邀请的成员可以访问
            </div>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                <span>💾</span>
                ${edit ? '保存修改' : '创建空间'}
            </button>
            <a href="/space/owned" class="btn btn-secondary">
                <span>↩️</span>
                返回列表
            </a>
        </div>
    </form>
</div>

<script>
    // 可见性选项交互
    document.querySelectorAll('.visibility-option').forEach(option => {
        option.addEventListener('click', function() {
            // 移除其他选项的选中状态
            document.querySelectorAll('.visibility-option').forEach(opt => {
                opt.classList.remove('selected');
            });
            // 添加当前选项的选中状态
            this.classList.add('selected');
            // 选中对应的radio
            this.querySelector('input[type="radio"]').checked = true;
        });
    });
</script> 